<template>
  <div>
    <el-tag>烫金</el-tag>
    <el-checkbox @change="clickToChange()">烫金</el-checkbox>
    <br/>
    <span>次数:</span>
    <el-input v-model="tangjin.ci_shu" :disabled="disable"
              placeholder="请输入次数" size="small" class = "length"></el-input>
    <br/>
    <span>面积(单位:cm):</span>
    <el-input v-model="tangjin.chang" :disabled="disable"
              placeholder="请输入长" size="small" class = "length"></el-input>
    <el-input v-model="tangjin.kuan" :disabled="disable"
              placeholder="请输入宽" size="small" class = "length"></el-input>
    <br/>
    <span>金纸:</span>
    <el-input v-model="tangjin.jinzhi" :disabled="disable"
              placeholder="请输入成本" size="small" class = "length"></el-input>
    <br/>
    <template v-if="getRole()">
    <el-tag type="warning" class="cost">成本: {{computeCost()}}</el-tag>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Tangjin',
  props: ['Q', 'x', 'y', 'm', 'confirm'],
  data () {
    return {
      disable: true,
      tangjin: {
        ci_shu: '',
        chang: '',
        kuan: '',
        jinzhi: ''
      }
    }
  },
  methods: {
    computeCost () {
      let q = parseInt(this.Q)
      let n = parseInt(this.tangjin.ci_shu)
      let c = 0.1 * q
      let m = parseInt(this.m)
      let s = parseInt(this.tangjin.chang) * parseInt(this.tangjin.kuan)
      let b = parseInt(this.tangjin.jinzhi)
      let cost = c <= 150 ? 150 * n + s * 0.2 * n * m + 50 * n + b : s * 0.2 * n * m + 50 * n + b
      return c <= 150 ? `150 × ${n} + ${s} × 0.2 × ${n} × ${m} + 50 × ${n} + ${b} = ${cost}` : `${s} × 0.2 × ${n} × ${m} + 50 × ${n} + ${b} = ${cost}`
    },
    clickToFin () {
      if (!this.disable) this.$emit('transferToFather', 'tangjin', this.tangjin)
    },
    clickToChange () {
      this.disable = !this.disable
    },
    getRole () {
      return sessionStorage.getItem('roleType') === '1'
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length{
  width: 150px;
}

.cost{
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-input{
  margin-top: 10px;
}
</style>
